<!--网站首页-->
<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <!--    引入jquery     -->
    <script src="../assets/js/jquery/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/js/unpkg/popper.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="../assets/css/culture.css" rel="stylesheet">
    <link href="../assets/css/historymapbook.css" rel="stylesheet">
    <link href="../assets/css/poem-1.css" rel="stylesheet">
</head>

<body>
    <div id="info-layer" class="info-layer">
        <div style="height: 100%;width: 100%;">
            <div class="info-layer-title">
                <p id="info-layer-title">黄鹤楼</p>
                <img id="info-layer-close" width="32px" src="../assets/css/bootstrap/icons/x-circle-fill-white.svg" />
            </div>

            <div style="width: 100%; display: inline-flex;">
                <div class="poem-1-location">
                    <img width="48px" src="../assets/img/tower-icon.png" />
                    <p
                        style="margin: 0;font-size: 1.5rem;border-bottom-width: 3px;border-bottom-color: crimson;border-bottom-style: dashed;">
                        黄鹤楼</p>
                </div>
                <div class="poem-1-profile">
                    <p><span style="font-size: 1.25rem;">崔颢《黄鹤楼》</span><span style="font-size: 0.8rem;">，写成于唐天宝年间</span>
                    </p>
                    <p style="font-size: 0.8rem; margin-top: 6px;">
                        崔颢(hào)（704—754），汴州（今河南开封市）人，原籍博陵安平（今河北安平县），出身“博陵崔氏”，唐代著名诗人，曾担任许州扶沟县尉，官位一直不显，后游历天下，天宝九载前后曾任监察御史，官至司勋员外郎，天宝十三载卒。
                    </p>
                </div>
            </div>
            <div style="width: 100%; margin-top: 20px;">
                <div class="poem-1-content">
                    <p class="poem-title">黄鹤楼</p>
                    <hr>
                    <div>
                        <p>昔人已乘黄鹤去，此地空余黄鹤楼。</p>
                        <p>黄鹤一去不复返，白云千载空悠悠。</p>
                        <p>晴川历历<a target="_blank" href="https://hanyu.baidu.com/s?wd=%E5%B4%94%E9%A2%A2">汉阳</a>树，芳草萋萋<a
                                target="_black"
                                href="https://hanyu.baidu.com/s?wd=%E9%B9%A6%E9%B9%89%E6%B4%B2&amp;ptype=zici">鹦鹉洲</a>。
                        </p>
                        <p>日暮乡关何处是？烟波江上使人愁。</p>
                    </div>
                </div>
            </div>
            <div style="width: 100%; display: inline-flex; margin-top: 20px;">
                <div class="poem-1-annotation">
                    <div style="display: inline-flex;"><p class="poem-content-border" style="font-size: 1rem;">注释</p></div>
                    <div class="poem-content-border">
                        <p>(1)黄鹤楼：故址在湖北省武汉市武昌区，民国初年被火焚毁，1985年重建，传说古代有一位名叫费祎的仙人，在此乘鹤登仙。</p>
                        <p>(2)昔人：指传说中的仙人子安。因其曾驾鹤过黄鹤山〔又名蛇山〕，遂建楼。</p>
                        <p>(3)乘：驾。</p>
                        <p>(4)去：离开。</p>
                        <p>(5)空：只。</p>
                        <p>(6)返：通返，返回。</p>
                        <p>(7)空悠悠：深，大的意思</p>
                        <p>(8)悠悠：飘荡的样子。</p>
                        <p>(9)川：平原。</p>
                        <p>(10)历历：清楚可数。</p>
                        <p>(11)汉阳：地名，现在湖北省武汉市汉阳区，与黄鹤楼隔江相望。</p>
                        <p>(12)萋萋：形容草木长得茂盛。</p>
                        <p>(13)鹦鹉洲：在湖北省武汉市武昌区西南，根据后汉书记载，汉黄祖担任江夏太守时，在此大宴宾客，有人献上鹦鹉，故称鹦鹉洲。唐朝时在汉阳西南长江中，后逐渐被水冲没。</p>
                        <p>(14)乡关：故乡。</p>
                    </div>
                    <p></p>
                </div>
                <div class="poem-1-translation">
                    <div style="display: inline-flex;"><p class="poem-content-border" style="font-size: 1rem; text-indent: 0;">译文</p></div>
                    <div class="poem-content-border">
                        <p>过去的仙人已经驾着黄鹤飞走了，这里只留下一座空荡荡的黄鹤楼。黄鹤一去再也没有回来，千百年来只看见悠悠的白云阳光照耀下的汉阳树木清晰可见，鹦鹉洲上有一片碧绿的芳草覆盖。天色已晚，眺望远方，故乡在哪儿呢？眼前只见一片雾霭笼罩江面，给人带来深深的愁绪。</p>
                    </div>
                </div>
            </div>
            <div style="width: 100%;">
                <div class="poem-1-comments">
                    <div style="display: inline-flex;"><p class="poem-content-border" style="font-size: 1rem; text-indent: 0;">赏析</p></div>
                    <div class="poem-content-border" >
                        <p>这首诗是吊古怀乡之佳作。诗人登临古迹黄鹤楼，泛览眼前景物，即景而生情，诗兴大作，脱口而出，一泻千里。既自然宏丽，又饶有风骨。诗虽不协律，但音节浏亮而不拗口。真是信手而就，一气呵成，成为历代所推崇的珍品。传说李白登此楼，目睹此诗，大为折服。说：“眼前有景道不得，崔颢题诗在上头。”严沧浪也说唐人七言律诗，当以此为第一。足见诗贵自然，纵使格律诗也无不如此。 </p>
                    </div>
                </div>
            </div>

            <hr>
            <div class="info-layer-gallery">
                <p id="info-layer-gallery-title">相册</p>
                <hr>
                <p class="info-layer-gallery-images">
                    <img class="info-layer-gallery-img" src="../assets/img/yellow-tower.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yellow-tower-2.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yueyang-tower.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yueyang-tower.jpeg" />
                </p>
            </div>
        </div>
        <div id="gallery" class="gallery-hide">
            <div class="gallery-title">
                <div id="gallery-back">
                    <img style="width: 32px; height: 32px;"
                        src="../assets/css/bootstrap/icons/chevron-left-white.svg" />
                    <p style="margin: 0;display: inline; font-size: 1rem;">返回</p>
                </div>
            </div>
            <div class="gallery-carousel">
                <div id="gallery-carousel" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>

                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
            </div>

            <div class="gallery-thumbs">
                <div id="gallery-thumbs" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-thumbs-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
</body>


</html>